Vue.component('vue-multiselect', window.VueMultiselect.default);
var vueApp = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        categoryList: categoryList,
        activedCategory: null,
        selectedMaterial: null,

        techList: techList,
        techMap: {},

        activeTech: null,
        activeSubTech: null,

        stepThreeType: 1,

        packageArr: [],
        packageMap: {},

        activePackage: null,

        value_01: null,
        value_02: null,


        paperWidth: 300,

        labelWidth: 50,
        labelHeight: 60,

        columnMargin: 20,
        rowMargin: 20,

        hasRadio: false,


        margin_top_item: null,
        margin_left_item: null,
        column_num_item: null,

        e_width: 150,
        e_height: 120,
        margin_left: 10,
        margin_top: 10,
        row_num: 3,
        column_num: 2,


        canvasImgUrl: ''
    },
    computed: {
        columnNumber: function () {
            var num = Math.floor(this.paperWidth / (parseInt(this.labelWidth + '') + this.columnMargin));
            var arr = [];
            for (var i = 0; i < num; i++) {
                arr.push(i);
            }
            return arr;
        }
    },
    created: function () {
        this.categoryList = categoryList;
        this.activedCategory = categoryList[0];
        this.selectedMaterial = categoryList[0].children[0];

        this.techList = techList;
        this.techList[0].active = true;
        this.activeTech = this.techList[0];

        this.techList[0].children[0].active = true;
        this.activeSubTech = techList[0].children[0];

        for (var i = 0; i < this.techList.length; i++) {
            var item = this.techList[i]
            this.techMap[item.id] = item;

            item.childrenMap = {};

            for (var k = 0; k < item.children.length; k++) {
                var child = item.children[k];
                item.childrenMap[child.id] = child;
            }

        }
        console.log(this.techMap, "=======this.techMap==========");

        this.packageArr = packageArr;

        var packageMap = {}; //只一级
        for (var i = 0; i < this.packageArr.length; i++) {
            var item = this.packageArr[i];
            packageMap[item.id] = item;
        }
        this.packageMap = packageMap;





    },
    computed: {
        getDirectionActiveChild() {
            var children = this.packageMap[9].children;

            var child = null;

            for (var i = 0; i < children.length; i++) {
                if (children[i].active || children[i].id == this.packageMap[9].child_value) {
                    console.log('找到了');
                    child = children[i];
                    break;
                }
            }
            if (child == null) {
                this.packageMap[9].children[0].active = true;
                child = this.packageMap[9].children[0];
            }
            return child;
        },
        setActiveChild(child_item) {

        }
    },
    methods: {
        setDirectActive() {
            console.log(this.packageMap[9].actived_child_item, '======this.packageMap[9].actived_child_item=====');

            var children = this.packageMap[9].children;
            for (var i = 0; i < children.length; i++) {
                if (children[i].id == this.packageMap[9].actived_child_item.id) {
                    console.log('找到了');
                    children[i].active = true;
                } else {
                    children[i].active = false;
                }
            }

        },
        CreateCanvasImgAndSetMonitorImg: function () {
            var canvens_iframe = window.document.getElementById('canvens_iframe');

            var e_width = this.e_width;
            var e_height = this.e_height;
            var margin_left = 10;
            var margin_top = 10;
            var row_num = this.row_num;
            var column_num = this.column_num;

            if (this.margin_top_item != null) {
                margin_top = this.margin_top_item.name;
            }
            if (this.margin_left_item != null) {
                margin_left = this.margin_left_item.name;
            }
            if (this.column_num_item != null) {
                column_num = this.column_num_item.name;
            }



            var iframeUrl = `canvens.html?e_width=${e_width}&e_height=${e_height}&margin_left=${margin_left}&margin_top=${margin_top}&row_num=${row_num}&column_num=${column_num}`;

            canvens_iframe.src = iframeUrl;

            var that = this;

            setTimeout(function () {
                var imgUrl = $(canvens_iframe.contentDocument.getElementById('my_img')).attr('src');
                that.canvasImgUrl = imgUrl;
                $("#my_img").attr('src', imgUrl);
            }, 200);
        },
        showOriginImg: function () {
            var that = this;

            if(that.canvasImgUrl.length==0)
            {
                layer.alert('请先生成图片');
                return;
            }

            layer.open({
                title: '原图',
                type: 1,
                area: ['1000px', '600px'],
                fixed: false, //不固定
                maxmin: false,
                shadeClose: true,
                content: `<div style="text-align:center;"><img src='` + that.canvasImgUrl + `' /></div>`
            });
        },
        handerCategoryClick: function (item) {


            console.log(item, "=====handerCategoryClick=======");

            var cw = window.document.body.clientWidth;
            var ch = window.document.body.clientHeight;

            console.log(window.innerWidth, "===========window.innerWidth ==========");
            console.log(window.innerHeight, "===========window.innerHeight ==========");

            console.log(window.screenTop, "===========window.screenTop==========");
            console.log(window.screenLeft, "===========window.screenLeft==========");

            var areaW = '1200px'; //pc
            var areaH = '600px'; //pc

            if (cw < 1000) {
                areaW = '90%';
                areaH = window.innerHeight * 0.8 + 'px'
            }

            layer.open({
                title: item.category_name,
                type: 2,
                area: [areaW, areaH],
                fixed: false, //不固定
                maxmin: false,
                shadeClose: true,
                content: './select.html?category_id=' + item.category_id + '&material_id=' + item.material_id //带入已选
            });
        },
        materialSelectedCallBack: function (item) {
            this.selectedMaterial = item;
            this.setAllUnActived();
            for (var i = 0; i < this.categoryList.length; i++) {
                if (this.categoryList[i].category_id == item.category_id) {
                    this.categoryList[i].active = true;
                    this.activedCategory = this.categoryList[i];
                } else {
                    this.categoryList[i].active = false;
                }
            }
        },
        setAllUnActived() {
            for (var i = 0; i < this.categoryList.length; i++) {
                this.categoryList[i].active = false;
            }
        },
        handerStepTwoFrontItemClick: function (item) {

            if (item.active) {
                return;
            }

            this.clearTeachActive();

            item.active = true;


            if (this.activeSubTech.pid != item.id) {
                var defaultActiveSubChild = item.children[0];
                defaultActiveSubChild.active = true;
                this.activeSubTech = defaultActiveSubChild;
            } else {
                this.activeSubTech.active = true;
            }

        },
        handerStepTwoRightItemClick: function (item) {

            if (item.active) {
                return;
            }

            this.clearBortherActive(item);

            var pid = item.pid;
            item.active = true;
            this.techMap[pid].active = true;

            this.activeSubTech = item;
            this.activeTech = this.techMap[pid];
        },
        clearBortherActive: function (item) {

            var pid = item.pid;
            var parent = this.techMap[pid];

            for (var k = 0; k < parent.children.length; k++) {
                var child = parent.children[k];
                child.active = false;
            }

        },
        clearTeachActive: function () {

            for (var i = 0; i < this.techList.length; i++) {
                var item = this.techList[i]

                item.active = false;

                for (var k = 0; k < item.children.length; k++) {
                    var child = item.children[k];
                    child.active = false;
                }

            }

        },
        handerStepThreeTypeClick: function (type) {
            this.stepThreeType = type;
        },
        handerStepThreeRightItemClick: function (item) {

            var curBool = item.active;
            //R角
            if (item.pid == 8) {
                this.hasRadio = !item.active;
            }

            if (item.pid == 10) {
                this.column_num = parseInt(item.name || "1");
            }

            var pid = item.pid;
            this.activePackage = this.packageMap[pid];

            this.clearActive(this.activePackage.children);
            item.active = true;



        },
        clearActive: function (arr) {
            for (var k = 0; k < arr.length; k++) {
                var item = arr[k];
                item.active = false;
            }
        }
    }
});




function render(e) {
    var w = 1366;
    var h = 1080;
    var rw = window.document.body.clientWidth; // window.innerWidth;
    var rh = window.innerHeight;
    var scaleX = rw / w;
    console.log(scaleX, "===========scaleX===========");
    var scaleY = rh / h;

    console.log(rw, "===========rw===========");



    if (scaleX < 1) {
        $('#layout').css('transform', 'scale(' + scaleX + ')');

    }

    // $("#setp_nav_wrap").css({
    //     width: '100%'
    // });

    //$('#layout').css('transform', 'scale(' + scaleX + ')');
    //$('#layout').css('transform', 'scale(' + scaleX + ', ' + scaleX + ')');
}

$(function () {
    $(window).resize(render).trigger('resize');
    $(window).on('deviceorientation', render);

    screen.orientation.addEventListener("change", function () {
        render();
        setTimeout(render, 100);
    }, false);
});